<!--
 * @Descripttion: 执法案件
 * @Author: wkj
 * @Date: 2021-12-28 14:00:50
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-12-30 23:05:33
-->
<template>
    <div class="dealwith">
        <!-- 查询 -->
        <div class="search-area" >
            <el-form :inline="true" ref="searchForm" :model="searchForm">
                 <el-form-item label="区任务号：">
                    <el-input
                            v-model="searchForm.eventName"
                            clearable
                            size="small"
                            style="width: 240px"
                    />
                </el-form-item>
                 <el-form-item label="市任务号：">
                    <el-input
                            v-model="searchForm.eventName"
                            clearable
                            size="small"
                            style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="案件状态：">
                    <el-input
                            v-model="searchForm.eventName"
                            clearable
                            size="small"
                            style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="上报时间：" class="date">
                    <el-col :span="11">
                        <el-date-picker type="date"  value-format="yyyy-MM-dd" placeholder="开始日期" size="small" style="width: 113px"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="width: 16px">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="结束日期" size="small" style="width: 113px"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
        <!-- 列表 -->
        <div class="content-area">
            <div class="table-list">
                <el-table  v-loading="loading" :data="tableList" border height="100%">
                    <el-table-column label="案件状态" prop="status"  />
                    <el-table-column label="市级任务号" prop="taskNum"  width="100"/>
                    <el-table-column label="区级任务号" prop="otherTaskNum"  show-overflow-tooltip width="100"/>
                    <el-table-column label="问题描述" prop="eventDesc" show-overflow-tooltip/>
                    <el-table-column label="地址描述" prop="address"  show-overflow-tooltip/>
                    <el-table-column label="问题来源" prop="eventSrcId" show-overflow-tooltip/>
                    <el-table-column label="所属区域" prop="districtName"/>
                    <el-table-column label="所属街办" prop="streetName"/>
                    <el-table-column label="所属社区" prop="communityCode" show-overflow-tooltip />
                    <el-table-column label="案件类型" prop="recTypeId" />
                    <el-table-column label="问题大类" prop="mainTypeCode" show-overflow-tooltip/>
                    <el-table-column label="问题小类" prop="subTypeCode"  show-overflow-tooltip/>
                    <el-table-column label="上报时间" prop="createTime" />
                    <el-table-column label="问题类型" prop="eventTypeCode" />
                    <el-table-column label="回退原因" prop="createTime" />
                    <el-table-column label="操作" prop="createTime" align="center" width="90">
                        <template slot-scope="scope" >
                            <div v-if="scope.row.status == '0'" class="scope_body scope_body_right">
                                <span class="badge-danger" @click="acceptView(scope.row)">受理</span>
                            </div>
                            <div v-else class="scope_body scope_body_right">
                                <span class="badge-danger bule-danger" @click="acceptCase(scope.row)">查看</span>
                            </div>
                            <!-- <div class="scope_body" v-if="scope.row.status == '1'">
                                <span class="badge-danger red-danger" @click="acceptRollback(scope.row)">回退</span>
                            </div> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-if="isShowPage"
                    class="no-shadow"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[15, 25, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </div>
        </div>
        <!-- 受理查看弹框 -->
        <accept-dialog v-if="acceptData.publicDialogVisible" :acceptData="acceptData" @closeDialog="closeDialog"></accept-dialog>
    </div>
</template>
<script>
import {getList,getEventDown} from '@/api/case/caseenforcement.js'
import acceptDialog from './acceptDialog.vue'
export default {
    components:{
        acceptDialog
    },
    data(){
        return{
            acceptData:{
                publicDialogVisible:false,
                acceptId:'',
                data:{}
            },
            searchForm:{
                eventName:''
            },
            tableList:[],
            loading:false,//遮罩层
            // 分页页码
            currentPage: 1,
            // 每页数量
            pageSize: 10,
            // 是否显示分页
            isShowPage: true,
            count: 0,
        }
    },
    mounted(){
        this.getList()
    },
    methods: {
        /**
         * Description:查询列表
         * Author:wkj
         * Date:2021/12/29
         */
        getList(){
            this.loading = true; 
            let data={
                pageNum:this.currentPage,
                pageSize:this.pageSize,
            };
            getList(data).then((res) => {
                if(res.code == 200){
                    this.loading = false; 
                    this.tableList = res.rows
                    this.count = res.total;
                }
            })
        },
        /**
         * Description:切换分页
         * Author:wkj
         * Date:2021/12/29
         */
        handleCurrentChange(currentPage){
            this.currentPage = currentPage;
            this.getList();
        },
        /**
         * Description:切换分页数量
         * Author:wkj
         * Date:2021/12/29
         */
        handleSizeChange(size){
            this.pageSize = size;
            this.currentPage = 1;
            this.getList();
        },
         /**
         * Description:跳转至查看
         * Author:wkj
         * Date:2021/12/29
         */
        acceptCase(row){
            this.acceptData.data = row
            this.acceptData.publicDialogVisible = true;
        },
         /**
         * Description:受理
         * Author:wkj
         * Date:2021/12/29
         */
        acceptView(row){
            this.$confirm('是否受理此案件', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getEventDown({otherTaskNum:row.otherTaskNum}).then((res)=>{
                    if(res.code == 200){
                        this.$message({
                            type: 'success',
                            message: '受理成功!'
                        });
                        this.getList()
                    } 
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消受理!'
                });          
            });
        },
         /**
         * Description:关闭弹框
         * Author:wkj
         * Date:2021/12/29
         */
        closeDialog(){
            this.acceptData.publicDialogVisible = false;
            this.getList();
        }
    }
}
</script>
<style lang="scss">
.dealwith{
    width: 100%;
    height: 100%;
    padding: 0.125rem 0.1875rem;
    display: flex;
    flex-direction: column;
    .search-area{
        display: flex;
        flex-direction: row;
        background-color: #FFFFFF;
        padding: 0.125rem;
        border-radius: 0.075rem;
    }
    .content-area{
        display: flex;
        flex-direction: column;
        flex: 1;
        background-color: #FFFFFF;
        padding: 0.125rem;
        border-radius: 0.075rem;
        margin-top: 0.1875rem;
        overflow: hidden;
        .table-list{
            display: flex;
            flex: 1;
            margin: 0.125rem 0;
            overflow: hidden;
            .el-table{
                flex: 1;
                overflow-y: auto;
            }
        }
    }
    .el-form-item{
        margin-bottom: 0.125rem;
        .el-form-item__label{
            width: 1.575rem;
            padding: 0;
            font-weight: inherit;
        }
    }
    .el-form--inline .el-form-item{
        margin-right:0.1875rem;
    }
    .date{
        .el-input__prefix{
            display:none;
        }
        .el-input--small .el-input__inner{
            padding: 0 0.25rem 0 0.1625rem;
        }
    }
}
.scope_body_right{
    margin-right: 5px;
}
.scope_body{
    display: inline-block;
    width: 60px;
}
.bule-danger{
    background: #428BCA;
}
// .red-danger{
//     background: red;
// }
.badge-danger{
    display: inline-block;
    width: 100%;
    cursor: pointer;
}
</style>